<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备查询</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">设备查询</div>
            
            <!-- 查询条件 -->
            <div class="query-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-select v-model="queryForm.equipmentType" placeholder="请选择设备类型" clearable>
                            <el-option label="冷藏车" value="truck"></el-option>
                            <el-option label="冷藏集装箱" value="container"></el-option>
                            <el-option label="移动冷库" value="mobile_warehouse"></el-option>
                            <el-option label="冷藏拖车" value="trailer"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.capacity" placeholder="请选择容量范围" clearable>
                            <el-option label="小型(1-5吨)" value="small"></el-option>
                            <el-option label="中型(5-15吨)" value="medium"></el-option>
                            <el-option label="大型(15-30吨)" value="large"></el-option>
                            <el-option label="特大型(30吨以上)" value="extra_large"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryForm.tempRange" placeholder="请选择温度范围" clearable>
                            <el-option label="冷冻(-18°C~-25°C)" value="frozen"></el-option>
                            <el-option label="冷藏(0°C~4°C)" value="refrigerated"></el-option>
                            <el-option label="保鲜(4°C~10°C)" value="fresh"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchEquipment">查询设备</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 设备列表 -->
            <div class="equipment-list">
                <el-table :data="equipmentData" border style="width: 100%">
                    <el-table-column prop="id" label="设备编号" width="120"></el-table-column>
                    <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
                    <el-table-column prop="type" label="设备类型" width="120"></el-table-column>
                    <el-table-column prop="capacity" label="载重(吨)" width="100"></el-table-column>
                    <el-table-column prop="tempRange" label="温度范围" width="140"></el-table-column>
                    <el-table-column prop="location" label="当前位置" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status === '可用' ? 'success' : 'danger'">
                                {{ scope.row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dailyPrice" label="日租价(元)" width="120"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="viewDetails(scope.row)">查看详情</el-button>
                            <el-button size="mini" type="primary" :disabled="scope.row.status !== '可用'" @click="rentEquipment(scope.row)">租用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 设备详情对话框 -->
        <el-dialog title="设备详情" :visible.sync="detailDialogVisible" width="60%">
            <div v-if="selectedEquipment">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="detail-item">
                            <strong>设备编号：</strong>{{ selectedEquipment.id }}
                        </div>
                        <div class="detail-item">
                            <strong>设备名称：</strong>{{ selectedEquipment.name }}
                        </div>
                        <div class="detail-item">
                            <strong>设备类型：</strong>{{ selectedEquipment.type }}
                        </div>
                        <div class="detail-item">
                            <strong>载重能力：</strong>{{ selectedEquipment.capacity }}吨
                        </div>
                        <div class="detail-item">
                            <strong>温度范围：</strong>{{ selectedEquipment.tempRange }}
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <strong>制造商：</strong>{{ selectedEquipment.manufacturer }}
                        </div>
                        <div class="detail-item">
                            <strong>制造年份：</strong>{{ selectedEquipment.year }}
                        </div>
                        <div class="detail-item">
                            <strong>设备状态：</strong>{{ selectedEquipment.status }}
                        </div>
                        <div class="detail-item">
                            <strong>当前位置：</strong>{{ selectedEquipment.location }}
                        </div>
                        <div class="detail-item">
                            <strong>日租价格：</strong>{{ selectedEquipment.dailyPrice }}元/天
                        </div>
                    </el-col>
                </el-row>
                <div class="detail-item">
                    <strong>设备描述：</strong>
                    <p>{{ selectedEquipment.description }}</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
                <el-button type="primary" :disabled="selectedEquipment && selectedEquipment.status !== '可用'" @click="rentEquipment(selectedEquipment)">立即租用</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    queryForm: {
                        equipmentType: '',
                        capacity: '',
                        tempRange: ''
                    },
                    equipmentData: [
                        {
                            id: 'HYRC001',
                            name: '衡阳湘运冷藏车',
                            type: '冷藏车',
                            capacity: 8,
                            tempRange: '-18°C~4°C',
                            location: '衡阳市蒸湘区',
                            status: '可用',
                            dailyPrice: 650,
                            manufacturer: '东风商用车',
                            year: 2022,
                            description: '衡阳本地冷藏车，熟悉衡阳地区路况，配备先进的温控系统，适用于衡阳特产运输。'
                        },
                        {
                            id: 'HYRC002',
                            name: '衡阳雁峰冷链车',
                            type: '冷藏车',
                            capacity: 12,
                            tempRange: '-20°C~10°C',
                            location: '衡阳市雁峰区',
                            status: '可用',
                            dailyPrice: 700,
                            manufacturer: '福田欧曼',
                            year: 2021,
                            description: '专业运输衡阳黄花菜、湘莲等特产，经济实用，维护成本低。'
                        },
                        {
                            id: 'HYCC001',
                            name: '衡阳港冷藏集装箱',
                            type: '冷藏集装箱',
                            capacity: 15,
                            tempRange: '-25°C~15°C',
                            location: '衡阳市珠晖区湘江码头',
                            status: '可用',
                            dailyPrice: 450,
                            manufacturer: '中车集团',
                            year: 2023,
                            description: '20英尺冷藏集装箱，适用于衡阳至长沙、广州等地的水陆联运，温控精度高。'
                        },
                        {
                            id: 'HYMW001',
                            name: '衡阳移动冷库',
                            type: '移动冷库',
                            capacity: 30,
                            tempRange: '-30°C~20°C',
                            location: '衡阳市石鼓区',
                            status: '可用',
                            dailyPrice: 900,
                            manufacturer: '海尔',
                            year: 2022,
                            description: '大型移动冷库，适用于衡阳农产品批发市场、特产加工企业的临时存储需求。'
                        },
                        {
                            id: 'HYRC003',
                            name: '衡阳南岳专用车',
                            type: '冷藏车',
                            capacity: 5,
                            tempRange: '-15°C~8°C',
                            location: '衡阳市南岳区',
                            status: '在途',
                            dailyPrice: 500,
                            manufacturer: '江铃福特',
                            year: 2020,
                            description: '小型冷藏车，专门服务南岳地区特产运输，山路适应性强。'
                        },
                        {
                            id: 'HYTR001',
                            name: '衡阳冷藏拖车',
                            type: '冷藏拖车',
                            capacity: 25,
                            tempRange: '-22°C~12°C',
                            location: '衡阳市雁峰区物流园',
                            status: '可用',
                            dailyPrice: 800,
                            manufacturer: '梁山挂车',
                            year: 2021,
                            description: '大型冷藏拖车，适用于衡阳至周边省市的长途运输，载重量大。'
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 4,
                    detailDialogVisible: false,
                    selectedEquipment: null
                }
            },
            methods: {
                searchEquipment() {
                    // 模拟搜索逻辑
                    let filteredData = this.equipmentData;
                    
                    if (this.queryForm.equipmentType) {
                        const typeMap = {
                            'truck': '冷藏车',
                            'container': '冷藏集装箱',
                            'mobile_warehouse': '移动冷库',
                            'trailer': '冷藏拖车'
                        };
                        filteredData = filteredData.filter(item => 
                            item.type === typeMap[this.queryForm.equipmentType]
                        );
                    }
                    
                    if (this.queryForm.capacity) {
                        filteredData = filteredData.filter(item => {
                            switch(this.queryForm.capacity) {
                                case 'small': return item.capacity <= 5;
                                case 'medium': return item.capacity > 5 && item.capacity <= 15;
                                case 'large': return item.capacity > 15 && item.capacity <= 30;
                                case 'extra_large': return item.capacity > 30;
                                default: return true;
                            }
                        });
                    }
                    
                    this.equipmentData = filteredData;
                    this.total = filteredData.length;
                    this.$message.success('查询完成，共找到 ' + this.total + ' 条记录');
                },
                resetQuery() {
                    this.queryForm = {
                        equipmentType: '',
                        capacity: '',
                        tempRange: ''
                    };
                    // 重新加载数据
                    this.loadEquipmentData();
                },
                loadEquipmentData() {
                    // 模拟加载数据
                    this.equipmentData = [
                        {
                            id: 'HYRC001',
                            name: '衡阳湘运冷藏车',
                            type: '冷藏车',
                            capacity: 8,
                            tempRange: '-18°C~4°C',
                            location: '衡阳市蒸湘区',
                            status: '可用',
                            dailyPrice: 650,
                            manufacturer: '东风商用车',
                            year: 2022,
                            description: '衡阳本地冷藏车，熟悉衡阳地区路况，配备先进的温控系统，适用于衡阳特产运输。'
                        },
                        {
                            id: 'HYRC002',
                            name: '衡阳雁峰冷链车',
                            type: '冷藏车',
                            capacity: 12,
                            tempRange: '-20°C~10°C',
                            location: '衡阳市雁峰区',
                            status: '可用',
                            dailyPrice: 700,
                            manufacturer: '福田欧曼',
                            year: 2021,
                            description: '专业运输衡阳黄花菜、湘莲等特产，经济实用，维护成本低。'
                        },
                        {
                            id: 'HYCC001',
                            name: '衡阳港冷藏集装箱',
                            type: '冷藏集装箱',
                            capacity: 15,
                            tempRange: '-25°C~15°C',
                            location: '衡阳市珠晖区湘江码头',
                            status: '可用',
                            dailyPrice: 450,
                            manufacturer: '中车集团',
                            year: 2023,
                            description: '20英尺冷藏集装箱，适用于衡阳至长沙、广州等地的水陆联运，温控精度高。'
                        },
                        {
                            id: 'HYMW001',
                            name: '衡阳移动冷库',
                            type: '移动冷库',
                            capacity: 30,
                            tempRange: '-30°C~20°C',
                            location: '衡阳市石鼓区',
                            status: '可用',
                            dailyPrice: 900,
                            manufacturer: '海尔',
                            year: 2022,
                            description: '大型移动冷库，适用于衡阳农产品批发市场、特产加工企业的临时存储需求。'
                        },
                        {
                            id: 'HYRC003',
                            name: '衡阳南岳专用车',
                            type: '冷藏车',
                            capacity: 5,
                            tempRange: '-15°C~8°C',
                            location: '衡阳市南岳区',
                            status: '在途',
                            dailyPrice: 500,
                            manufacturer: '江铃福特',
                            year: 2020,
                            description: '小型冷藏车，专门服务南岳地区特产运输，山路适应性强。'
                        },
                        {
                            id: 'HYTR001',
                            name: '衡阳冷藏拖车',
                            type: '冷藏拖车',
                            capacity: 25,
                            tempRange: '-22°C~12°C',
                            location: '衡阳市雁峰区物流园',
                            status: '可用',
                            dailyPrice: 800,
                            manufacturer: '梁山挂车',
                            year: 2021,
                            description: '大型冷藏拖车，适用于衡阳至周边省市的长途运输，载重量大。'
                        }
                    ];
                    this.total = this.equipmentData.length;
                },
                viewDetails(row) {
                    this.selectedEquipment = row;
                    this.detailDialogVisible = true;
                },
                rentEquipment(row) {
                    this.$confirm('确认租用设备 ' + row.name + ' 吗？', '租用确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('租用申请已提交，请等待审核');
                        this.detailDialogVisible = false;
                    }).catch(() => {
                        this.$message.info('已取消租用');
                    });
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            },
            mounted() {
                this.loadEquipmentData();
            }
        });
    </script>

    <style scoped>
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .equipment-list {
            margin-bottom: 20px;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
        
        .detail-item {
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .detail-item strong {
            color: #409EFF;
            margin-right: 10px;
        }
        
        .detail-item p {
            margin: 10px 0;
            color: #666;
            line-height: 1.8;
        }
    </style>
</body>
</html>